<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>周原考古模拟器 - 可分享版</title>
    <!-- 外部资源（无需本地下载，网页加载时自动获取） -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        // 自定义主题（贴合考古主题的土黄色调）
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#8B4513', // 主色：棕褐色
                        secondary: '#D2B48C', // 辅助色：小麦色
                        accent: '#CD853F', // 强调色：秘鲁色
                        light: '#F5DEB3', // 浅色：小麦色浅调
                        dark: '#5D3A1A' // 深色：深褐色
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .text-shadow {
                text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
            }
            .bg-pattern {
                /* 考古纹理背景（轻量化SVG，不影响加载速度） */
                background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%239C92AC' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
            }
            .option-hover {
                transition: all 0.3s ease;
            }
            .option-hover:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            }
        }
    </style>
</head>
<body class="bg-light bg-pattern min-h-screen font-sans text-dark">
    <!-- 顶部导航（显示游戏名称和进度） -->
    <header class="bg-primary text-light shadow-md sticky top-0 z-10">
        <div class="container mx-auto px-4 py-3 flex flex-col md:flex-row justify-between items-center">
            <h1 class="text-2xl md:text-3xl font-bold flex items-center mb-2 md:mb-0">
                <i class="fa fa-university mr-2"></i>周原考古模拟器
            </h1>
            <div id="progress-container" class="flex items-center">
                <span class="mr-2 text-sm">进度:</span>
                <div class="w-48 h-2 bg-dark rounded-full overflow-hidden">
                    <div id="progress-bar" class="h-full bg-accent w-0 transition-all duration-500"></div>
                </div>
                <span id="progress-text" class="ml-2 text-sm">0/23</span>
            </div>
        </div>
    </header>

    <!-- 主内容区（包含开始、问答、结果三个界面） -->
    <main class="container mx-auto px-4 py-8 md:py-16">
        <!-- 1. 开始界面 -->
        <section id="start-screen" class="max-w-3xl mx-auto text-center">
            <div class="bg-white rounded-xl shadow-lg p-8 md:p-12 mb-8 transform transition-all duration-500 hover:shadow-xl">
                <div class="w-24 h-24 bg-primary rounded-full flex items-center justify-center mx-auto mb-6">
                    <i class="fa fa-shovel text-4xl text-light"></i>
                </div>
                <h2 class="text-3xl md:text-4xl font-bold mb-4 text-primary">周原考古模拟器</h2>
                <p class="text-lg mb-8 text-gray-700">
                    体验周原考古工作的日常，通过23个选择，看看你在周原考古时的不同“身份”。
                </p>
                <button id="start-button" class="bg-primary hover:bg-dark text-white font-bold py-3 px-8 rounded-lg transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-accent focus:ring-opacity-50">
                    开始探险 <i class="fa fa-arrow-right ml-2"></i>
                </button>
            </div>
            
            <!-- 游戏说明 -->
            <div class="bg-white/80 backdrop-blur-sm rounded-lg p-4 shadow">
                <h3 class="font-semibold mb-2 flex items-center justify-center">
                    <i class="fa fa-info-circle text-accent mr-2"></i>游戏说明
                </h3>
                <p class="text-sm text-gray-700">
                    完成所有选择后，将根据你的选项组合生成专属周原考古身份。可直接分享本链接给朋友，一起体验！
                </p>
            </div>
        </section>

        <!-- 2. 问题界面（默认隐藏） -->
        <section id="question-screen" class="max-w-3xl mx-auto hidden">
            <div class="bg-white rounded-xl shadow-lg p-6 md:p-8 mb-6">
                <div class="flex items-center mb-4">
                    <span id="question-number" class="bg-primary text-white rounded-full w-8 h-8 flex items-center justify-center mr-2">1</span>
                    <h2 id="question-text" class="text-xl md:text-2xl font-bold text-primary"></h2>
                </div>
                <div id="options-container" class="space-y-3 mt-6">
                    <!-- 选项通过JS动态生成 -->
                </div>
            </div>
            
            <div class="text-center text-sm text-gray-500">
                <p>完成所有问题即可查看你的考古结局</p>
            </div>
        </section>

        <!-- 3. 结果界面（默认隐藏） -->
        <section id="result-screen" class="max-w-4xl mx-auto hidden">
            <div class="bg-white rounded-xl shadow-lg p-6 md:p-10 mb-8">
                <h2 class="text-3xl font-bold text-center mb-8 text-primary">你的考古结局</h2>
                
                <div id="results-container" class="space-y-6">
                    <!-- 结局通过JS动态生成 -->
                </div>
                
                <!-- 重新开始按钮 -->
                <div class="mt-10 text-center">
                    <button id="restart-button" class="bg-primary hover:bg-dark text-white font-bold py-3 px-8 rounded-lg transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-accent focus:ring-opacity-50">
                        重新开始 <i class="fa fa-refresh ml-2"></i>
                    </button>
                </div>
            </div>
            
            <!-- 分享提示 -->
            <div class="bg-white/80 backdrop-blur-sm rounded-lg p-5 shadow">
                <h3 class="font-semibold mb-3 text-lg text-primary flex items-center justify-center">
                    <i class="fa fa-share-alt mr-2"></i>分享游戏
                </h3>
                <p class="text-gray-700 text-center">
                    复制当前网页链接，发送给朋友，一起体验周原考古的乐趣吧！
                </p>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-dark text-light py-6 mt-12">
        <div class="container mx-auto px-4 text-center">
            <p>周原考古模拟器 &copy; 2024</p>
            <p class="text-sm mt-2 text-gray-400">基于周原考古工作情景设计 | 可自由分享</p>
        </div>
    </footer>

    <script>
        // --------------------------
        // 1. 游戏核心数据（问题+结局）
        // --------------------------
        // 23个问题（与原需求一致）
        const questions = [
            {
                id: 1,
                text: "清晨，第一个闹钟响了，你选择：",
                options: [
                    { id: '1A', text: "起床洗漱吃早饭" },
                    { id: '1B', text: "按掉闹钟继续睡" },
                    { id: '1C', text: "叫醒室友自己睡" },
                    { id: '1D', text: "紧赶慢赶冲向车" }
                ]
            },
            {
                id: 2,
                text: "上车了，你选择在车上……？",
                options: [
                    { id: '2A', text: "继续补个觉" },
                    { id: '2B', text: "赶紧吃个饭" },
                    { id: '2C', text: "抓紧玩手机" },
                    { id: '2D', text: "随便看风景" }
                ]
            },
            {
                id: 3,
                text: "到工地了，但是还没到八点，你选择……？",
                options: [
                    { id: '3A', text: "立即上工" },
                    { id: '3B', text: "再玩手机" },
                    { id: '3C', text: "继续睡觉" },
                    { id: '3D', text: "四处溜达" }
                ]
            },
            {
                id: 4,
                text: "发现一个陶环（残片），你选择…？",
                options: [
                    { id: '4A', text: "立即打点测绘采集" },
                    { id: '4B', text: "扔在一边等会再说" },
                    { id: '4C', text: "直接放进陶片袋里" },
                    { id: '4D', text: "根本没看见陶环" }
                ]
            },
            {
                id: 5,
                text: "画不出遗迹单位线，你选择…？",
                options: [
                    { id: '5A', text: "寻找随便哪个老师" },
                    { id: '5B', text: "和方友商量商量画" },
                    { id: '5C', text: "抓住过路老师学长" },
                    { id: '5D', text: "随便吧都做了就行" }
                ]
            },
            {
                id: 6,
                text: "发现灰坑做错了，你…？",
                options: [
                    { id: '6A', text: "冷静寻找正确单位" },
                    { id: '6B', text: "抓来老师对症下药" },
                    { id: '6C', text: "做错太多习惯就好" },
                    { id: '6D', text: "自责懊恼后悔不已" }
                ]
            },
            {
                id: 7,
                text: "九点四十五，休息时间到了，你选择…？",
                options: [
                    { id: '7A', text: "手铲一丢睡大觉" },
                    { id: '7B', text: "拿上手铲去串方" },
                    { id: '7C', text: "掏出手机玩一会" },
                    { id: '7D', text: "抓紧时间再挖挖" }
                ]
            },
            {
                id: 8,
                text: "灰坑找不到边，你选择…？",
                options: [
                    { id: '8A', text: "老师help" },
                    { id: '8B', text: "再敲敲" },
                    { id: '8C', text: "方友help" },
                    { id: '8D', text: "笑死根本不存在这个坑" }
                ]
            },
            {
                id: 9,
                text: "灰坑做过了，你…？",
                options: [
                    { id: '9A', text: "询问老师该怎么办" },
                    { id: '9B', text: "常有之事不足挂怀" },
                    { id: '9C', text: "与方友在坑中怅然" },
                    { id: '9D', text: "悄悄揭过当不存在" }
                ]
            },
            {
                id: 10,
                text: "和方友想法出现了分歧，你…？",
                options: [
                    { id: '10A', text: "找老师" },
                    { id: '10B', text: "随便吧都听你的" },
                    { id: '10C', text: "说服方友" },
                    { id: '10D', text: "手铲一扔喊我要挖墓" }
                ]
            },
            {
                id: 11,
                text: "收工上车了，你会选择哪个座位…？",
                options: [
                    { id: '11A', text: "哪有位置坐哪里" },
                    { id: '11B', text: "抢占吃饭最佳位" },
                    { id: '11C', text: "锻炼身体爱站着" },
                    { id: '11D', text: "观赏风景最前排" }
                ]
            },
            {
                id: 12,
                text: "到站周原博物馆，你选择…？",
                options: [
                    { id: '12A', text: "冲出车门奔食堂" },
                    { id: '12B', text: "信步闲庭洗个手" },
                    { id: '12C', text: "先放陶片再吃饭" },
                    { id: '12D', text: "吃腻食堂开小灶" }
                ]
            },
            {
                id: 13,
                text: "吃完饭，你选择做什么？",
                options: [
                    { id: '13A', text: "我先睡了" },
                    { id: '13B', text: "整理上午工作情况" },
                    { id: '13C', text: "这是什么？手机。玩一下！" },
                    { id: '13D', text: "弹琴唱歌做运动" }
                ]
            },
            {
                id: 14,
                text: "一点四十，上车了，你选择…？",
                options: [
                    { id: '14A', text: "我继续睡" },
                    { id: '14B', text: "刷会手机" },
                    { id: '14C', text: "聊一聊天" },
                    { id: '14D', text: "背个单词" }
                ]
            },
            {
                id: 15,
                text: "上工了，隔梁上路过一个曹大/昊昊/晓歌老师/王成师傅/…，你选择…？",
                options: [
                    { id: '15A', text: "抓住解决疑难杂症" },
                    { id: '15B', text: "我是社恐看不见我" },
                    { id: '15C', text: "摸鱼被抓鬼鬼祟祟" },
                    { id: '15D', text: "大喊老师我要挖墓" }
                ]
            },
            {
                id: 16,
                text: "发现不认识的陶片，你选择…？",
                options: [
                    { id: '16A', text: "赶紧拿着去问老师" },
                    { id: '16B', text: "扔一旁反正都不认识" },
                    { id: '16C', text: "自己查资料看看" },
                    { id: '16D', text: "陶片？陶片被出土出走了" }
                ]
            },
            {
                id: 17,
                text: "灰坑干不明白，你…？",
                options: [
                    { id: '17A', text: "我一定要搞明白！" },
                    { id: '17B', text: "老师快让我挖墓" },
                    { id: '17C', text: "佛系象征性掏掏" },
                    { id: '17D', text: "祈求生土快降临" }
                ]
            },
            {
                id: 18,
                text: "发现做的灰坑其实是夯土，你…？",
                options: [
                    { id: '18A', text: "崩溃大叫" },
                    { id: '18B', text: "平静面对" },
                    { id: '18C', text: "做的多了已经麻木" },
                    { id: '18D', text: "没见过夯土" }
                ]
            },
            {
                id: 19,
                text: "方中发现一个瓮棺，你",
                options: [
                    { id: '19A', text: "激动到升天" },
                    { id: '19B', text: "愤怒：死孩子增加我工作量" },
                    { id: '19C', text: "呼朋唤友看小孩" },
                    { id: '19D', text: "平静，已经有过一个了" }
                ]
            },
            {
                id: 20,
                text: "终于到了下工时间！你…",
                options: [
                    { id: '20A', text: "争分夺秒工作" },
                    { id: '20B', text: "听从指令收拾" },
                    { id: '20C', text: "早收拾完了" },
                    { id: '20D', text: "找张老师飞个小飞机" }
                ]
            },
            {
                id: 21,
                text: "在回程的路上你会…？",
                options: [
                    { id: '21A', text: "交流探方今日所得" },
                    { id: '21B', text: "赶紧掏出手机耍耍" },
                    { id: '21C', text: "伺机而动准备吃饭" },
                    { id: '21D', text: "啥也不干我想静静" }
                ]
            },
            {
                id: 22,
                text: "下雨了，面对要上课，你…？",
                options: [
                    { id: '22A', text: "啊啊啊我要睡觉" },
                    { id: '22B', text: "爱上课，多上课" },
                    { id: '22C', text: "换个地方摸鱼" },
                    { id: '22D', text: "只要不上工就行" }
                ]
            },
            {
                id: 23,
                text: "休息日，你选择…？",
                options: [
                    { id: '23A', text: "离不开我心爱的小床" },
                    { id: '23B', text: "进城进城进城！" },
                    { id: '23C', text: "老师我要上工！" },
                    { id: '23D', text: "赶紧写个论文" }
                ]
            }
        ];

        // 结局数据（已按需求调整）
        const endings = [
            {
                id: 1,
                title: "周原干饭王",
                description: "在你的世界里，考古工作固然重要，但填饱肚子才是第一要务。无论是抢占最佳座位还是第一个冲向食堂，你总能找到最适合干饭的时机和地点。",
                required: ['1A', '11B', '12A', '21C'],
                minCount: 3,
                icon: "fa-cutlery"
            },
            {
                id: 2,
                title: "周原睡神",
                description: "睡眠对你来说比什么都重要。无论是闹钟响后继续睡，还是工作间隙见缝插针地补觉，你总能找到机会进入梦乡，堪称考古队的睡眠大师。",
                required: ['1B', '1C', '2A', '3C', '6A', '13A', '14A', '22A', '23A'],
                minCount: 4,
                icon: "fa-bed"
            },
            {
                id: 3,
                title: "周原治不好我的网瘾",
                description: "手机是你的精神支柱，无论何时何地，只要有机会就会拿起手机。工作间隙、休息时间，甚至在去工地的路上，手机都不离手，网瘾晚期没跑了。",
                required: ['2C', '3B', '7C', '13B', '14B'],
                minCount: 3,
                icon: "fa-mobile"
            },
            {
                id: 4,
                title: "天选上工人", // 已调整：23C非必选，动态minCount
                description: "你对考古工作充满热情，总是第一个上工，最后一个下工。休息时间也在工作，遇到问题积极解决，是考古队不可或缺的中坚力量。",
                required: ['3A', '6A', '7D', '13B', '15A', '16A', '16C', '17A', '20A', '21A', '23C'],
                // minCount动态判断：选了23C则3项，没选则5项
                icon: "fa-trophy"
            },
            {
                id: 5,
                title: "我学学学！",
                description: "你保持着学习的热情，即使在考古工地也不忘提升自己。背单词、查资料，不放过任何学习机会，是考古队里的学霸级人物。",
                required: ['14D', '16C', '22B', '23D'],
                minCount: 2,
                icon: "fa-book"
            },
            {
                id: 6,
                title: "成分复杂，或显示多个结局",
                description: "你的选择呈现出多元化的特点，无法简单归类到某一种类型中。这说明你是一个适应能力强、多面性的人，能够根据不同情况做出灵活反应。",
                isDefault: true,
                icon: "fa-random"
            },
            {
                id: 7,
                title: "自力更生小能手",
                description: "遇到问题时，你更倾向于自己解决或与同伴商量，而不是立刻寻求老师帮助。你相信自己的能力，具有很强的独立思考和解决问题的能力。",
                required: ['5B', '6A', '8B', '10C', '16C'],
                minCount: 3,
                icon: "fa-wrench"
            },
            {
                id: 8,
                title: "老师全部眼熟我",
                description: "你总是积极向老师请教问题，无论是画不出线还是灰坑做错了，都能第一时间找到老师解决。老师们对你非常熟悉，是老师眼中最勤奋好问的学生。",
                required: ['5A', '5C', '6B', '8A', '9A', '10A', '16A'],
                minCount: 3,
                icon: "fa-handshake-o"
            },
            {
                id: 9,
                title: "我是真的想挖墓",
                description: "比起日常的考古工作，你对挖墓有着特殊的执念。一有机会就喊着要挖墓，这可能是你参加考古的最大动力，堪称考古队的盗墓笔记爱好者。",
                required: ['10D', '15D', '17B'],
                minCount: 2,
                icon: "fa-search"
            },
            {
                id: 10,
                title: "social butterfly",
                description: "你擅长与人交往，喜欢四处走动交流，无论是串方还是聊天，都能很好地融入团队。你是考古队里的社交达人，活跃气氛的担当。",
                required: ['3D', '7B', '14C', '19C'],
                minCount: 2,
                icon: "fa-users"
            },
            {
                id: 11,
                title: "随遇而安最强者", // 已调整：minCount从4→3
                description: "无论遇到什么情况，你都能保持平和的心态，随遇而安。做错了也不懊恼，遇到困难也不急躁，是考古队里心态最稳的人，泰山崩于前而色不变。",
                required: ['5D', '6C', '9B', '10B', '11A', '16B', '16D', '17C', '18B', '18C', '19D'],
                minCount: 3, // 原4项，已下调
                icon: "fa-leaf"
            }
        ];

        // --------------------------
        // 2. 游戏状态管理
        // --------------------------
        const gameState = {
            currentQuestionIndex: 0, // 当前问题索引
            answers: [] // 玩家选择的答案（存选项ID，如'1A'）
        };

        // --------------------------
        // 3. DOM元素与事件绑定
        // --------------------------
        // 获取DOM元素
        const startScreen = document.getElementById('start-screen');
        const questionScreen = document.getElementById('question-screen');
        const resultScreen = document.getElementById('result-screen');
        const startButton = document.getElementById('start-button');
        const restartButton = document.getElementById('restart-button');
        const questionNumber = document.getElementById('question-number');
        const questionText = document.getElementById('question-text');
        const optionsContainer = document.getElementById('options-container');
        const resultsContainer = document.getElementById('results-container');
        const progressBar = document.getElementById('progress-bar');
        const progressText = document.getElementById('progress-text');

        // 绑定事件
        startButton.addEventListener('click', startGame);
        restartButton.addEventListener('click', restartGame);

        // --------------------------
        // 4. 游戏核心逻辑
        // --------------------------
        // 开始游戏：隐藏开始界面，显示第一个问题
        function startGame() {
            startScreen.classList.add('hidden');
            questionScreen.classList.remove('hidden');
            gameState.currentQuestionIndex = 0;
            gameState.answers = [];
            renderQuestion(); // 渲染当前问题
            updateProgress(); // 更新进度条
        }

        // 重新开始：隐藏结果界面，显示开始界面
        function restartGame() {
            resultScreen.classList.add('hidden');
            startScreen.classList.remove('hidden');
        }

        // 渲染当前问题（生成选项按钮）
        function renderQuestion() {
            const question = questions[gameState.currentQuestionIndex];
            questionNumber.textContent = question.id; // 显示问题序号
            questionText.textContent = question.text; // 显示问题内容
            optionsContainer.innerHTML = ''; // 清空之前的选项

            // 生成每个选项的按钮
            question.options.forEach(option => {
                const optionElement = document.createElement('div');
                optionElement.className = 'option-hover bg-light border border-accent rounded-lg p-4 cursor-pointer hover:bg-secondary/30';
                // 选项内容：字母（如A）+ 选项文本
                optionElement.innerHTML = `
                    <div class="flex items-center">
                        <span class="bg-accent text-white rounded-full w-8 h-8 flex items-center justify-center mr-3">${option.id.slice(-1)}</span>
                        <span>${option.text}</span>
                    </div>
                `;
                // 点击选项后，记录答案并进入下一题
                optionElement.addEventListener('click', () => selectOption(option.id));
                optionsContainer.appendChild(optionElement);
            });
        }

        // 选择选项：记录答案，判断是否进入下一题/结果页
        function selectOption(optionId) {
            gameState.answers.push(optionId); // 记录答案

            // 若还有下一题：切换到下一题
            if (gameState.currentQuestionIndex < questions.length - 1) {
                gameState.currentQuestionIndex++;
                renderQuestion();
                updateProgress();
            } else {
                // 若所有题答完：显示结果
                showResults();
            }
        }

        // 更新进度条（显示当前答题进度）
        function updateProgress() {
            const current = gameState.currentQuestionIndex + 1;
            const total = questions.length;
            const progressPercent = (current / total) * 100;
            progressBar.style.width = `${progressPercent}%`;
            progressText.textContent = `${current}/${total}`;
        }

        // 显示结果：计算匹配的结局，生成结果界面
        function showResults() {
            questionScreen.classList.add('hidden');
            resultScreen.classList.remove('hidden');
            resultsContainer.innerHTML = ''; // 清空之前的结果

            // 计算匹配的结局（排除默认结局）
            const matchedEndings = [];
            endings.forEach(ending => {
                if (ending.isDefault) return; // 跳过默认结局

                // 1. 统计当前结局的匹配项数量
                let matchCount = 0;
                ending.required.forEach(requiredOption => {
                    if (gameState.answers.includes(requiredOption)) {
                        matchCount++;
                    }
                });

                // 2. 特殊处理：结局4（天选上工人）的动态minCount
                let requiredMinCount = ending.minCount;
                if (ending.id === 4) {
                    // 选了23C：minCount=3；没选：minCount=5
                    requiredMinCount = gameState.answers.includes('23C') ? 3 : 5;
                }

                // 3. 若匹配数量达标，加入匹配列表
                if (matchCount >= requiredMinCount) {
                    matchedEndings.push({ ...ending, matchCount });
                }
            });

            // 排序匹配结局：匹配数量多的在前
            matchedEndings.sort((a, b) => b.matchCount - a.matchCount);

            // 生成结果界面
            if (matchedEndings.length === 1) {
                // 情况1：只匹配1个结局
                renderEnding(matchedEndings[0]);
            } else if (matchedEndings.length > 1) {
                // 情况2：匹配多个结局
                matchedEndings.forEach(ending => renderEnding(ending));
                // 加一个“成分复杂”的提示
                const noteElement = document.createElement('div');
                noteElement.className = 'mt-6 p-4 bg-secondary/20 rounded-lg border-l-4 border-accent';
                noteElement.innerHTML = `<p class="italic text-gray-700">你同时符合多个结局的特征，真是个复杂又有趣的人！</p>`;
                resultsContainer.appendChild(noteElement);
            } else {
                // 情况3：无匹配结局，显示默认结局
                const defaultEnding = endings.find(e => e.isDefault);
                renderEnding(defaultEnding);
            }
        }

        // 渲染单个结局（生成结局卡片）
        function renderEnding(ending) {
            const endingElement = document.createElement('div');
            endingElement.className = 'bg-white border border-primary/20 rounded-xl p-5 shadow-md hover:shadow-lg transition-shadow';
            endingElement.innerHTML = `
                <div class="flex items-center mb-4">
                    <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mr-4">
                        <i class="fa ${ending.icon} text-2xl text-primary"></i>
                    </div>
                    <h3 class="text-2xl font-bold text-primary">${ending.title}</h3>
                </div>
                <p class="text-gray-700">${ending.description}</p>
                ${ending.matchCount ? `<p class="mt-3 text-sm text-gray-500">匹配度: ${ending.matchCount}/${ending.required.length}</p>` : ''}
            `;
            resultsContainer.appendChild(endingElement);
        }
    </script>
</body>
</html>